
<script setup>
import {ref} from 'vue'
const formData = ref({
	phone: "",
	code: "",
	password: "",
	countdown: 0 //倒计时
})

//登录逻辑
const handleLogin = () => {
	if(formData.value.phone=="12345678910"&& formData.value.password=="123456"){
		uni.showToast({
			title:'登录成功',
			icon:"success"
		})
		
		setTimeout(()=>{
			uni.navigateTo({
				url:'/pages/index/index'
			})
		},1000)
	}
	
}

//验证码获取
/*const getVerificationCode = () => {
	if (!this.phone) {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		})
		return
	}

	// 模拟发送验证码 
	this.countdown = 60
	const timer = setInterval(() => {
	this.countdown--
	if (this.countdown <= 0) {
		clearInterval(timer)
	}
 }, 1000)

		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		})
}*/
</script>

<template>
	<!-- 康护助手登录界面  -->
	<div class="login-container">
		<!-- 手绘风格背景装饰元素 -->
		<div class="hand-drawn-bg">
			<div class="watercolor-stroke-1"></div>
			<div class="watercolor-stroke-2"></div>
			<div class="sketch-line-1"></div>
			<div class="sketch-line-2"></div>
		</div>

		<!-- 主登录卡片 -->
		<div class="login-card">
			<!-- 标题 -->
			<h1 class="handwritten-title">
				<span class="title-text">康护助手</span>
				<span class="title-decoration">✍️</span>
			</h1>

			<!-- 表单 -->
			
				<!-- 手机号输入 -->
				<div class="input-group">
					<label class="handwritten-label">手机号码</label>
					<div class="input-wrapper">
						<i class="fas fa-mobile-alt input-icon"></i>
						<input type="tel" v-model="formData.phone" placeholder="请输入手机号" class="handwritten-input" maxlength="11">
					</div>
				</div>

				<!-- 验证码输入 -->
				<div class="input-group">
					<label class="handwritten-label">密码</label>
					<div class="input-wrapper">
						<i class="fas fa-lock input-icon"></i>
						<input type="text" v-model="formData.password" placeholder="请输入密码" class="handwritten-input" maxlength="6">
						<!--   <button 
              type="button" 
              class="get-code-btn"
              :disabled="countdown > 0"
              @click="getVerificationCode"
            >
              {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
            </button> -->
					</div>
				</div>

				<!-- 登录按钮 -->
				<button @tap="handleLogin" class="login-btn">
					<span class="btn-text">登 录</span>
					<span class="btn-decoration">✏️</span>
				</button>
			

			<!-- 底部手绘装饰 -->
			<div class="footer-decoration">
				<div class="doodle-1">⚕️</div>
				<div class="doodle-2">💊</div>
				<div class="doodle-3">🩺</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	/* 手绘艺术风格CSS */
	.login-container {
		position: relative;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f8f4e9;
		overflow: hidden;
		font-family: 'Ma Shan Zheng', cursive, sans-serif;
	}

	.hand-drawn-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.watercolor-stroke-1 {
		position: absolute;
		top: 10%;
		right: 15%;
		width: 200px;
		height: 200px;
		background: rgba(255, 230, 230, 0.5);
		border-radius: 50%;
		filter: blur(15px);
		transform: rotate(15deg);
	}

	.watercolor-stroke-2 {
		position: absolute;
		bottom: 5%;
		left: 10%;
		width: 150px;
		height: 250px;
		background: rgba(230, 255, 250, 0.4);
		border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
		filter: blur(10px);
	}

	.sketch-line-1 {
		position: absolute;
		top: 30%;
		left: 5%;
		width: 80%;
		height: 1px;
		background: repeating-linear-gradient(to right, #888, #888 2px, transparent 2px, transparent 5px);
		transform: rotate(-5deg);
		opacity: 0.3;
	}

	.sketch-line-2 {
		position: absolute;
		bottom: 20%;
		right: 5%;
		width: 70%;
		height: 1px;
		background: repeating-linear-gradient(to right, #888, #888 2px, transparent 2px, transparent 5px);
		transform: rotate(3deg);
		opacity: 0.3;
	}

	.login-card {
		position: relative;
		z-index: 1;
		width: 85%;
		max-width: 400px;
		padding: 30px;
		background: white;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
		border: 2px dashed rgba(0, 0, 0, 0.1);
	}

	.handwritten-title {
		text-align: center;
		margin-bottom: 30px;
		font-size: 2.2rem;
		color: #333;
		position: relative;
	}

	.title-text {
		display: inline-block;
		transform: rotate(-2deg);
		letter-spacing: 2px;
	}

	.title-decoration {
		position: absolute;
		top: -15px;
		right: 20%;
		font-size: 1.5rem;
		opacity: 0.7;
	}

	.input-group {
		margin-bottom: 25px;
	}

	.handwritten-label {
		display: block;
		margin-bottom: 8px;
		font-size: 1rem;
		color: #666;
		font-weight: 500;
		letter-spacing: 1px;
		transform: rotate(-0.5deg);
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #ddd;
		padding-bottom: 5px;
	}

	.input-icon {
		color: #999;
		margin-right: 10px;
		font-size: 1.2rem;
	}

	.handwritten-input {
		flex: 1;
		border: none;
		outline: none;
		padding: 8px 0;
		font-size: 1rem;
		background: transparent;
		font-family: 'Ma Shan Zheng', cursive, sans-serif;
		letter-spacing: 1px;
	}

	.get-code-btn {
		background: transparent;
		border: none;
		color: #4a90e2;
		font-size: 0.9rem;
		cursor: pointer;
		padding: 5px 10px;
		border-radius: 15px;
		font-family: 'Ma Shan Zheng', cursive, sans-serif;
		transform: rotate(1deg);
		white-space: nowrap;
	}

	.get-code-btn:disabled {
		color: #999;
	}

	.login-btn {
		width: 100%;
		padding: 12px;
		margin-top: 20px;
		background: linear-gradient(to right, #6bd6e0, #4a90e2);
		color: white;
		border: none;
		border-radius: 25px;
		font-size: 1.1rem;
		cursor: pointer;
		box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
		position: relative;
		overflow: hidden;
		font-family: 'Ma Shan Zheng', cursive, sans-serif;
		letter-spacing: 2px;
	}

	.login-btn::before {
		content: '';
		position: absolute;
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
		transform: rotate(10deg);
		opacity: 0;
		transition: opacity 0.3s;
	}

	.login-btn:hover::before {
		opacity: 1;
	}

	.btn-text {
		position: relative;
		z-index: 1;
	}

	.btn-decoration {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%) rotate(15deg);
		opacity: 0.7;
	}

	.footer-decoration {
		display: flex;
		justify-content: space-around;
		margin-top: 30px;
		opacity: 0.5;
	}

	.doodle-1,
	.doodle-2,
	.doodle-3 {
		font-size: 1.5rem;
		transform: rotate(5deg);
		animation: float 3s ease-in-out infinite;
	}

	.doodle-2 {
		animation-delay: 0.5s;
	}

	.doodle-3 {
		animation-delay: 1s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(5deg);
		}

		50% {
			transform: translateY(-10px) rotate(8deg);
		}
	}
</style>